<template>
    <div class="header">
        <div class="logo">
            <router-link to="/">我的博客</router-link>
        </div>

        <div class="menu">
            <div v-if="hasLogin">
                <router-link to="/create">发表文章</router-link>
            </div>

            <div v-else>
                <router-link to="/login">登录</router-link>
                <router-link to="/register">注册</router-link>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: [],
    computed: {
        hasLogin() {
            let token = localStorage.getItem("token");
            return token != null;
        },
    },
    data() {
        return {};
    },
};
</script>

<style lang="less" scoped>
.header {
    padding: 0 40px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ddd;

    .logo {
        font-size: 24px;
        font-weight: bold;
        float: left;
        letter-spacing: 2px;
    }

    .menu {
        font-size: 18px;
        float: right;

        a:hover {
            color: blue;
        }
    }
}
</style>